<template>
<div class="home">
   
   <div class="swiper">
      <img src="../../assets/bbt01.jpg" alt="">
  </div>

  <div class="list">
    <!-- <h3>正在抢购&nbsp;&nbsp;&nbsp;上新预告</h3> -->
    <ul class="list1">
        <li v-for="(item1,index1) in arr1" :key='index1' 
        @click="handleClick1(index1)" :class='{active1:currentIndex1==index1}'
       
        >{{item1}}</li>
     
    </ul>
  
    <!-- 店铺列表 -->
    <div class="list3" v-for="(item,index) in tuanlist"  :key='index'>
        <div class="left">
            <img :src="item.picture" alt="">
        </div>
        <div class="right" >
             <h4>{{item.name}}</h4>
            <p><span class="bbt">爆爆团价</span>  &nbsp;<span>{{item.month_saled_content}}</span>
         
          <!-- 设置马上抢按钮 -->
            <span class="msq" @click="masq(item)">{{item.status==3?'已抢':'未开抢'}}</span>
            </p> 
            <p>
                <span>￥{{item.min_price}}</span>&nbsp;
      
            </p>
        </div>
       
    </div>
   

  </div>
</div>
</template>

<script>
// 导入爆爆团api请求
import { tuan_list } from '../../utils/api'

export default {
    data(){
    return{
        tuanlist:[],
        currentIndex1:0,
        masqIndex:0,
        arr1:['正在抢购','上新预告'],
        // arr2:[{lq:false}]
      // // arr2:['年贷节热卖','津贴联盟','满减优惠','品质联盟']


    }
 },
   mounted(){
    tuan_list().then((res)=>{
      console.log(res.data);
      this.shoplist = res.data.list   
    }),
      // 请求 爆爆团-正在抢购列表
    tuan_list( {status:1} ).then((res)=>{
      console.log(res.data);
      this.tuanlist=res.data.list;
    }),
      tuan_list( {status:0} ).then((res)=>{
      console.log(res.data);
      this.tuanlist=res.data.list;
    })
  },
 methods:{
    handleClick1(index1){
         this.currentIndex1=index1;
       
    },
 
   //  设置马上抢方法
    masq(item){
         item.status==3;
         // this.masqIndex=index;
    }
 }
}


</script>

<style lang="scss" scoped>

  .swiper{
    margin: 10px;
  }
    img{
        width: 100%;
        border-radius: 10px;
    }

    .list{
    margin: 10px;
 }
 .list1{
    display: flex;
    justify-content: space-around;
 }
 .list2{
    display: flex;
    justify-content: space-around;
    margin: 10px;
 }
 .list2 li{
    background-color:#b6b3b3;
    font-size: 14px;
 }
 .list3{
    margin: 10px;
    display: flex;
 }
  .list3 .left{
    width: 70px;
    height: 70px;
    margin-top: 25px;
    line-height: 70px;
    margin-right: 15px;
  }
 .list3 .left img{
    width: 70px;
    height: 70px;
    margin: 10px;
 }
   .list3 .right{
     width:100%;
     margin-left: 15px;
     margin-top: 10px;
  }
     .list3 .right p{
    font-size: 10px;

  }
  .active1{
    background-color: red;
  }
 .bbt {
   color: red;
 }
 .msq{
   display: inline-block;
   margin-left: 50px;;
   border: 1px solid red;
   background: red;
    color: white;
    width: 50px;
    text-align: center;
    border-radius: 10px;
 }
</style>